<template>
  <RouterView>
    <template #default="{ Component, route }">
      <Watermark :content="watermark">
        <transition
          :name="
            getTransitionName({
              route,
              openCache,
              enableTransition: getEnableTransition,
              cacheTabs: getCaches,
              def: getBasicTransition,
            })
          "
          mode="out-in"
          appear
        >
          <keep-alive v-if="openCache" :include="getCaches">
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
          <component v-else :is="Component" :key="route.fullPath" />
        </transition>
      </Watermark>
    </template>
  </RouterView>
  <FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts" setup>
  import { computed, onBeforeUnmount, ref, unref } from 'vue';
  import { Watermark } from 'ant-design-vue';
  import FrameLayout from '@/layouts/iframe/index.vue';

  import { useRootSetting } from '@/hooks/setting/useRootSetting';

  import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
  import { getTransitionName } from './transition';

  import { useMultipleTabStore } from '@/store/modules/multipleTab';
  import { useUserStore } from '@/store/modules/user';
  import { formatToDate, formatToDateTime } from '@/utils/dateUtil';

  defineOptions({ name: 'PageLayout' });

  const { getShowMultipleTab } = useMultipleTabSetting();
  const tabStore = useMultipleTabStore();

  const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();

  const { getBasicTransition, getEnableTransition } = useTransitionSetting();

  const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

  const getCaches = computed((): string[] => {
    if (!unref(getOpenKeepAlive)) {
      return [];
    }
    return tabStore.getCachedTabList;
  });

  const currentDate = ref(formatToDate());
  const currentTime = ref(formatToDateTime());
  // 运行定时器，一秒获取一次
  const interval = window.setInterval(() => {
    currentTime.value = formatToDateTime();
  }, 1000);
  // 这个界面不在我们视线中的时候，关闭定时器
  onBeforeUnmount(() => {
    window.clearInterval(interval);
  });
  // 添加水印信息
  const userStore = useUserStore();
  // 将水印内容定义为一个计算属性
  const watermark = computed(() => {
    if (userStore != null && userStore.getToken) {
      const userInfo = userStore.getUserInfo;
      const nickName = userInfo?.nickName || '';
      let userName = userInfo?.userName || '';
      const tenantName = userInfo?.tenantName;
      if (tenantName) {
        userName = `${tenantName}@${userName}`;
      }
      let loginInfo: any = undefined;
      const loginIp = userInfo?.loginIp;
      const loginDate = userInfo?.loginDate;
      // 直接使用currentTime作为登录时间的比较，因为它是实时更新的
      if (loginIp) {
        if (currentDate.value === formatToDate(loginDate)) {
          loginInfo = `${loginIp}@${currentTime.value}`;
        } else {
          loginInfo = `${loginIp}@${formatToDate(loginDate)}`;
        }
      }
      return [nickName, userName, loginInfo];
    }
    return ''; // 默认返回空字符串或其他默认水印内容
  });
</script>
